<template>
  <div class="big">
    <div class="box">
      <div class="login_tittle">系统登录</div>
      <div class="login_form">
        <el-form
          label-width="60px"
          ref="loginform"
          :rules="checkinfo"
          :model="logininfo"
        >
          <el-form-item label="账号" prop="account">
            <el-input type="text" v-model="logininfo.account">
              <i slot="prefix" class="iconfont icon-yonghufill"></i>
            </el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              :type="istrue ? 'text' : 'password'"
              v-model="logininfo.password"
              @keydown.enter.native="gologin"
            >
              <i slot="prefix" class="iconfont icon-mima"></i>
              <i
                slot="suffix"
                :class="['iconfont', 'zhengyan', istrue ? 'zhengyan' : 'biyan']"
                @click="istrue = !istrue"
              ></i>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="login_btn" @click="gologin"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { checkLogin } from "../api/acc.js";
import local from "../utils/local.js"
export default {
  data() {
    return {
      istrue: false,
      logininfo: {
        account: "",
        password: "",
      },
      checkinfo: {
        account: [
          { required: true, message: "请输入账号", trigger: "blur" },
          { min: 3, max: 12, message: "请输入3-12位的账号", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码！！", trigger: "blur" },
          { min: 3, max: 6, message: "请输入3-6位的密码！！", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    fn() {
      istrue = !istrue;
    },
    gologin() {
      this.$refs.loginform.validate((b) => {
        if (b) {
          checkLogin(this.logininfo).then((res) => {
            if (res.code === 0) {
                local.set('token',res.token)
                local.set('role',res.role)
                this.$message({
                  message: "恭喜你，这是一条成功消息",
                  type: "success",
                  duration: 2000,
                  onClose:()=>{
                      this.$router.replace("/home");
                  }
                });
            } else {
              this.$message({
                message: res.msg,
                type: "warning",
              });
            }
          });
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.login_tittle {
  font-size: 28px;
  text-align: center;
  color: #fff;
}
.box {
  width: 300px;
  height: 300px;
}
.big {
  background-color: #2d3a4b;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.login_btn {
  width: 100%;
}
.login_form {
  margin-top: 40px;
}
.biyan {
  font-size: 27px;
}
.zhengyan {
  font-size: 27px;
}
</style>